<template>
  <el-card class="mt">
    <template #header>
      <div class="card-header">
        <h1>能源统计</h1>
      </div>
    </template>

    <el-row>
      <!-- 左侧 - 营收占比 -->
      <el-col :span="9">
        <div ref="chartRef2" style="width: 100%; height: 400px"></div>
      </el-col>

      <!-- 右侧 - 电量统计 -->
      <el-col :span="15">
        <div ref="chartRef" style="width: 100%; height: 400px"></div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { energyStatisticsRoutes, getBlocksEnergy } from "@/api/status";

/**
 * 功能作用: echarts 图表的配置和使用
 * 功能描述: 能源统计区块的 ECharts 图表配置
 *
 * 引入 自定义的 ECharts 组件 useChart, 用于处理 ECharts 图表数据
 * 创建响应式变量,目的是为了在模板中使用 ECharts 组件,跟html中的 ref 属性对应
 *
 *
 * 创建 setChartData 函数,用于处理 能源统计 的图表数据
 * 在函数中定义 ECharts 的图表配置项,包括标题、提示框、图例、坐标轴、系列等
 * 调用 能源统计 接口获取数据
 * 判断接口返回的状态码是否为 200,如果是,则将接口返回的数据赋值给图表配置项
 * return chartOption,返回图表配置项
 * 调用自定义 ECharts 组件的 useChart 函数,传入 chartRef(能源统计的模板锚点) 和 chartOption(配置项) 作为参数
 *
 *
 * 创建 setChartData2 函数,用于处理 营收占比 的图表数据
 * 在函数中定义 ECharts 的图表配置项,包括标题、提示框、图例、坐标轴、系列等
 * 调用 营收占比 接口获取数据
 * 判断接口返回的状态码是否为 200,如果是,则将接口返回的数据赋值给图表配置项
 * return chartOption2,返回图表配置项
 * 调用自定义 ECharts 组件的 useChart 函数,传入 chartRef2(营收占比的模板锚点) 和 chartOption2(配置项) 作为参数
 *
 *
 * 注意:
 * 1. 需要确保 ECharts 组件已经正确安装并引入
 * 2. 确保接口返回的数据格式与图表配置项中的数据格式一致
 * 3. 如果需要动态更新图表数据,可以在 setChartData 函数中添加逻辑来处理数据变化
 * 4. 如果需要处理其他类型的图表,可以根据 ECharts 的文档进行相应的配置
 * 5. 确保在使用 ECharts 组件之前,已经正确引入了 ECharts 的样式和脚本
 */

import { useChart } from "@/hokes/useChart";
const chartRef = ref(null); // 能源统计
const chartRef2 = ref(null); // 营收占比

const setChartData = async () => {
  const chartOption: any = reactive({
    title: {
      text: "电量统计",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: [],
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "13:00",
        "14:00",
        "15:00",
        "16:00",
        "17:00",
        "18:00",
        "19:00",
        "20:00",
        "21:00",
      ],
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: `{value}kw`,
      },
    },
    series: [
      {
        name: "充电量",
        type: "line",
        data: [20, 50, 30, 70, 60, 80, 40, 60, 50],
        lineStyle: {
          width: 4,
        },
        smooth: true,
        itemStyle: {
          color: "purple",
          shadowBlur: 5,
          shadowColor: "rgba(0,255,0,0.5)",
        },
      },
      {
        name: "充电时长",
        type: "line",
        data: [40, 60, 50, 80, 70, 90, 60, 70, 80],
        lineStyle: {
          width: 4,
        },
        smooth: true,
        itemStyle: {
          color: "lightgreen",
          shadowBlur: 5,
          shadowColor: "rgba(0,255,0,0.5)",
        },
      },
      {
        name: "充电功率",
        type: "line",
        data: [30, 40, 60, 50, 70, 20, 30, 40, 60],
        lineStyle: {
          width: 4,
        },
        smooth: true,
        itemStyle: {
          color: "skyblue",
          shadowBlur: 5,
          shadowColor: "rgba(0,255,0,0.5)",
        },
      },
    ],
  });
  const res = await energyStatisticsRoutes();
  if (res.code === 200) {
    // Echarts 的图表配置项
    chartOption.legend.data = res.data.list.map((item: any) => item.name);

    for (let i = 0; i < res.data.list.length; i++) {
      chartOption.series[i].name = res.data.list[i].name;
      chartOption.series[i].data = res.data.list[i].data;
    }
  }
  return chartOption;
};
useChart(chartRef, setChartData);
const setChartData2 = async () => {
  const chartOption2: any = reactive({
    legend: {
      top: "bottom",
    },
    tooltip: {
      trigger: "item",
      formatter: `{a}<br/>{b}:{c}`,
    },
    series: [
      {
        name: "营收占比",
        type: "pie",
        radius: ["50%", "70%"],
        center: ["50%", "50%"],
        roseType: "area",
        emphasis: {
          label: {
            show: true,
            fontSize: "16",
            fontWeight: "bold",
          },
        },
        data: [
          // 默认数据,后期会通过接口获取
        ],
      },
    ],
    graphic: {
      type: "text",
      left: "center",
      top: "center",
      style: {
        text: "营收占比",
        fontSize: "20",
        fill: "#333",
      },
    },
  });
  const res = await getBlocksEnergy();
  if (res.code === 200) {
    chartOption2.series[0].data = res.data.list;
  }
  return chartOption2;
};
useChart(chartRef2, setChartData2);
</script>

<style lang="less" scoped></style>
